<template>
  <div class="award-grid-container">
    <!-- 遍历奖励列表 -->
    <div class="award-grid-item" v-for="(item, index) in awardList" :key="index">
      <!-- 奖励图片容器 -->
      <div class="award-image-container" :class="{ 'gray-overlay': item.status === 1 }">
        <!-- 奖励图片 -->
        <el-image
          class="award-image"
          :src="`${config.api}${item?.awardImage}`"
          fit="cover"
          :preview-teleported="true"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { queryUserAward } from '@renderer/api/app'
import { onMounted, ref } from 'vue'
import { useUserInfo } from '@renderer/stores/userInfo'
import config from '@renderer/config/index'

// 定义奖励项接口
interface AwardItem {
  id: number
  awardImage: string
  awardLevel: number
  awardName: string
  status: number
}

// 定义奖励列表数组
const awardList = ref<AwardItem[]>([])

// 页面加载时执行查询奖励数据
onMounted(() => {
  refreshData()
})

// 刷新奖励数据
const refreshData = () => {
  // 获取用户奖励信息
  queryUserAward(useUserInfo().userInfos.user.name)
    .then((res) => {
      awardList.value = res.data
    })
    .catch((error) => {
      console.error('Failed to fetch award data:', error)
    })
}
</script>

<style scoped>
/* 奖励网格容器样式 */
.award-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3列 */
  gap: 10px; /* 列与列之间的间距 */
  padding: 10px;
  height: 100vh;
}

/* 奖励网格项样式 */
.award-grid-item {
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  border-radius: 10px;
  text-align: center;
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
}

/* 奖励图片容器样式 */
.award-image-container {
  flex: 1;
  position: relative;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

/* 奖励图片样式 */
.award-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  position: relative;
  z-index: 2;
}

/* 灰色半透明遮盖样式 */
.gray-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 3, 3, 0.8); /* 灰色半透明遮盖 */
  z-index: 99;
}
</style>
